<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Listagem</title>
    </h:head>
    <h:body>
        <h:form id="listagem">
            <p:growl id="growl"
                     showDetail="true"/>
            <p:dataTable
                value="#{agendaBean.contatos}"
                var="contato">

                <p:column style="width:2%">
                    <p:rowToggler/>
                </p:column>

                <p:column style="width: 49%">
                    <f:facet name="header">
                        Nome do Contato
                    </f:facet>
                    <h:outputText value="#{contato.nome}"/>
                </p:column>

                <p:rowExpansion>
                    <h:panelGrid id="display" columns="2" style="width:300px;"
                                 styleClass="ui-widget-content grid">
                        <h:outputLabel value="Nome"/> 
                        <h:outputText id="nome" value="#{contato.nome}"/> 
                        <h:outputText value="Email"/>
                        <h:outputText id="email" value="#{contato.email}"/>
                        <h:outputText value="Telefone"/>
                        <h:outputText id="telefone" value="#{contato.telefone}"/>
                    </h:panelGrid>
                </p:rowExpansion>
                <p:column headerText="Operações">
                    <p:commandButton
                        ajax="false"
                        value="Editar"
                        action="#{agendaBean.editar()}">
                        <f:setPropertyActionListener 
                            value="#{contato}"
                            target="#{agendaBean.contato}"
                            />
                    </p:commandButton>
                    <p:commandButton
                        ajax="false"
                        value="Excluir"
                        action="#{agendaBean.excluir()}">
                        <f:setPropertyActionListener 
                            target="#{agendaBean.contato}"
                            value="#{contato}"/>
                    </p:commandButton>
                </p:column>
            </p:dataTable>
            <p:commandButton
                ajax="false"
                value="Incluir"
                action="#{agendaBean.incluir()}"/>

        </h:form>
    </h:body>
</html>

